<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getOrderDetail } from '@/services/consult'
import { useRoute, useRouter } from 'vue-router'
import type { recordList } from '@/types/consult'
import { OrderStatus } from '@/enum'
import { useFormat, useOpeBtn, useShowPrescription } from '@/composable'
import { useClipboard } from '@vueuse/core'
import { showImagePreview, showSuccessToast } from 'vant'
// 获取订单详情
const route = useRoute()
const orderDetail = ref<recordList>()
const getDetail = async () => {
  const { data } = await getOrderDetail(route.fullPath.slice(14))
  orderDetail.value = data
}
onMounted(() => {
  getDetail()
})
// 格式化就诊时间
const { getIllnessFlag, getIllnessTime } = useFormat()
// 复制订单
const { copy } = useClipboard()
const copyOrderNo = (orderId?: string) => {
  if (orderId) {
    copy(orderId)
    showSuccessToast('复制成功')
  }
}
// 查看处方
const { showPrescription } = useShowPrescription()

// 待支付
// 咨询中
// 已完成 =》 更多 + 问诊记录 + 查看评价|去评价
// 已取消
// 待接诊 =》 取消问诊 + 继续沟通
const { opeLoading, orderbtn } = useOpeBtn()
const router = useRouter()
const removeOrder = (status: string) => {
  switch (status) {
    case 'del':
      orderbtn('del', orderDetail.value?.id)
      router.push({ name: 'ConsultRecord' })
      break
    case 'cancel':
      orderbtn('cancel', orderDetail.value?.id)
      router.push({ name: 'ConsultRecord' })
      break
    default:
      break
  }
}
// 点击右侧箭头显示医生详情
const showDoc = ref(false)
const show = ref(false)
// 关闭支付抽屉
const closeSheet = () => {
  show.value = false
  return true
}
</script>

<template>
  <div class="detail-page" v-if="orderDetail?.id">
    <DP-NavBar
      title="问诊详情"
      :back="
        () => {
          $router.push({ name: 'ConsultRecord' })
        }
      "
    ></DP-NavBar>
    <div class="detail-head">
      <div class="detail-head-title">
        <h3 class="title">图文问诊{{ orderDetail?.actualPayment }}元</h3>
        <span
          :class="[
            'status',
            {
              orange: orderDetail?.status === OrderStatus.ConsultPay,
              primary: orderDetail?.status === OrderStatus.ConsultChat
            }
          ]"
          >{{ orderDetail?.statusValue }}</span
        >
        <p class="tip">服务医生信息</p>
      </div>
      <div class="card">
        <div class="avatar">
          <img width="38" :src="orderDetail.docInfo?.avatar" />
        </div>
        <div class="card-body">
          <p class="title">极速问诊</p>
          <span>{{ orderDetail?.docInfo?.name || '暂未分配医生' }}</span>
        </div>
        <van-icon
          name="arrow"
          color="#999"
          @click="showDoc = true"
          v-if="orderDetail?.docInfo?.name"
        />
      </div>
    </div>
    <div class="patient-detail">
      <van-cell-group :border="false">
        <van-cell title="患者信息">
          <template #value>
            {{ orderDetail?.patientInfo.name }} |
            {{ orderDetail?.patientInfo.genderValue }} |
            {{ orderDetail?.patientInfo.age }}岁
          </template></van-cell
        >
        <van-cell
          title="患病时长"
          :value="getIllnessTime(orderDetail?.illnessTime)"
        ></van-cell>
        <van-cell
          title="就诊情况"
          :value="getIllnessFlag(orderDetail?.consultFlag)"
        ></van-cell>
        <van-cell title="病情描述" :label="orderDetail?.illnessDesc"></van-cell>
      </van-cell-group>
    </div>
    <div class="order-detail">
      <h3>订单信息</h3>
      <van-cell-group :border="false">
        <van-cell title="订单编号" center class="orderNo">
          <template #value>
            <div class="copy" @click="copyOrderNo(orderDetail?.orderNo)">
              复制
            </div>
            <span>{{ orderDetail?.orderNo }}</span>
          </template>
        </van-cell>
        <van-cell title="创建时间" :value="orderDetail?.createTime"></van-cell>
        <van-cell
          title="应付款"
          :value="`￥${orderDetail?.payment}`"
        ></van-cell>
        <van-cell
          title="优惠券"
          :value="`-￥${orderDetail?.couponDeduction}`"
        ></van-cell>
        <van-cell
          title="积分抵扣"
          :value="`-￥${orderDetail?.pointDeduction}`"
        ></van-cell>
        <van-cell
          title="实付款"
          :value="`￥${orderDetail?.actualPayment}`"
          class="orderPrice"
        ></van-cell>
      </van-cell-group>
    </div>
    <div class="detail-foot">
      <van-submit-bar>
        <template #default>
          <p v-if="orderDetail?.statusValue === '支付中'"></p>
        </template>
        <template #top v-if="orderDetail?.statusValue === '待支付'">
          <p>
            请在
            <van-count-down :time="15 * 60 * 1000" /> 内完成支付，超时订单将取消
          </p>
        </template>
        <template #button>
          <div class="btn">
            <template v-if="orderDetail?.status === OrderStatus.ConsultCancel">
              <van-button
                size="normal"
                round
                class="done"
                :loading="opeLoading"
                @click="removeOrder('del')"
                >删除订单</van-button
              >
              <van-button
                class="second"
                type="primary"
                size="normal"
                round
                @click="$router.push({ name: 'home' })"
                >咨询其他医生</van-button
              ></template
            >
            <template
              v-else-if="orderDetail?.status === OrderStatus.ConsultPay"
            >
              <p class="bottom_price">
                需付款<span class="price"
                  >￥{{ orderDetail?.actualPayment.toFixed(2) }}</span
                >
              </p>
              <van-button
                size="normal"
                round
                class="done"
                :loading="opeLoading"
                @click="removeOrder('cancel')"
                >取消问诊</van-button
              >
              <van-button
                class="second"
                type="primary"
                size="normal"
                round
                @click="show = true"
                >去支付</van-button
              ></template
            >
            <template
              v-else-if="orderDetail?.status === OrderStatus.ConsultWait"
            >
              <van-button
                size="normal"
                round
                class="done"
                :loading="opeLoading"
                @click="removeOrder('cancel')"
                >取消问诊</van-button
              >
              <van-button
                class="second"
                type="primary"
                size="normal"
                round
                plain
                @click="
                  $router.push({
                    name: 'ConsultRoom',
                    query: { orderId: orderDetail?.id }
                  })
                "
                >继续沟通</van-button
              ></template
            >
            <template
              v-else-if="orderDetail?.status === OrderStatus.ConsultComplete"
            >
              <div class="more">
                <DP-More :order-detail="orderDetail"></DP-More>
                <div class="right">
                  <van-button
                    size="normal"
                    round
                    class="done"
                    @click="
                      $router.push({
                        name: 'ConsultRoom',
                        query: { orderId: orderDetail?.id }
                      })
                    "
                    >问诊记录</van-button
                  >
                  <van-button
                    v-if="orderDetail?.evaluateId"
                    class="second done"
                    type="primary"
                    size="normal"
                    round
                    >查看评价</van-button
                  >
                  <van-button
                    v-else
                    class="second"
                    type="primary"
                    size="normal"
                    round
                    @click="
                      $router.push({
                        name: 'ConsultRoom',
                        query: { orderId: orderDetail?.id }
                      })
                    "
                    >去评价</van-button
                  >
                </div>
              </div>
            </template>
            <template
              v-else-if="orderDetail?.status === OrderStatus.ConsultChat"
            >
              <van-button
                size="normal"
                round
                class="done"
                v-if="orderDetail?.prescriptionId"
                @click="showPrescription(orderDetail?.prescriptionId)"
                >查看处方</van-button
              >
              <van-button size="normal" round class="done" v-else
                >问诊记录</van-button
              >
              <van-button
                class="second"
                type="primary"
                size="normal"
                round
                plain
                @click="
                  $router.push({
                    name: 'ConsultRoom',
                    query: { orderId: orderDetail?.id }
                  })
                "
                >继续沟通</van-button
              >
            </template>
          </div>
        </template>
      </van-submit-bar>
      <DP-Pay
        v-if="show"
        :actual-payment="orderDetail.actualPayment"
        :orderID="orderDetail.id"
        :show-bottom="show"
        :close-sheet="closeSheet"
        pay-callback="/room"
      ></DP-Pay>
    </div>
    <van-popup
      class="docInfo"
      v-model:show="showDoc"
      :style="{
        height: '100%',
        width: '100%',
        'max-width': '100%',
        'padding-top': '46px'
      }"
    >
      <DP-NavBar
        title="医生详情"
        :back="
          () => {
            showDoc = false
          }
        "
      ></DP-NavBar>
      <van-cell-group inset>
        <van-cell title="头像" center>
          <template #value>
            <img
              :src="orderDetail.docInfo?.avatar"
              alt=""
              width="48"
              @click="
                showImagePreview([orderDetail!.docInfo?.avatar as string])
              "
            />
          </template>
        </van-cell>
        <van-cell title="姓名" :value="orderDetail.docInfo?.name" center />
        <van-cell
          title="所属医院"
          :value="`${orderDetail.docInfo?.hospitalName}(${orderDetail.docInfo?.gradeName})`"
          center
        />
        <van-cell title="部门" :value="orderDetail.docInfo?.depName" center />
        <van-cell
          title="职称"
          :value="orderDetail.docInfo?.positionalTitles"
          center
        />
      </van-cell-group>
    </van-popup>
  </div>
  <div class="detail-page" v-else>
    <DP-NavBar title="问诊详情"></DP-NavBar>
    <van-skeleton title :row="4" style="margin-top: 30px" />
    <van-skeleton title :row="4" style="margin-top: 30px" />
  </div>
</template>

<style lang="scss" scoped>
.detail-page {
  margin-top: 46px;
  margin-bottom: 100px;
  .detail-head {
    padding: 15px;
    position: relative;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 36vw;
      background: linear-gradient(
        180deg,
        rgba(44, 181, 165, 0),
        rgba(44, 181, 165, 0.2)
      );
      border-bottom-left-radius: 40vw 5.33333vw;
      border-bottom-right-radius: 40vw 5.33333vw;
      z-index: -1;
    }
    .detail-head-title {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      height: 65px;
      padding: 10px 3px;
      box-sizing: border-box;
      .tip {
        width: 100%;
      }
      .status {
        font-size: 16px;
        color: var(--cp-tag);
        font-weight: 500;
      }
    }
    .card {
      display: flex;
      justify-content: space-between;
      margin: 0 15px;
      height: 74px;
      background-color: #fff;
      align-items: center;
      padding: 0 10px;
      border-radius: 10px;
      box-shadow: 0 0 5.86667vw #e5e5e580;
      .card-body {
        flex: 1;
        margin-left: 10px;
      }
    }
  }
  .patient-detail {
    &::after {
      display: block;
      content: '';
      height: 12px;
      background-color: var(--cp-bg);
    }
  }
  .order-detail {
    h3 {
      padding: 2.66667vw 4.8vw;
      font-weight: 400;
    }
    .orderNo {
      ::v-deep() {
        .van-cell__title {
          flex: none;
        }
        .van-cell__value {
          display: flex;
          justify-content: end;
          align-items: center;
          .copy {
            padding: 0 10px;
            border: 1px solid var(--cp-primary);
            background-color: var(--cp-plain);
            color: var(--cp-primary);
            font-size: 12px;
            border-radius: 12px;
            margin-right: 10px;
            height: 20px;
            line-height: 20px;
            box-sizing: border-box;
          }
        }
      }
    }
    .orderPrice {
      ::v-deep() {
        .van-cell__value {
          font-size: 4.26667vw;
          color: var(--cp-price);
        }
      }
    }
  }
  .detail-foot {
    height: 65px;
    position: fixed;
    bottom: 0;
    width: 100%;
    .price {
      font-size: 4.26667vw;
      color: var(--cp-price);
    }
    ::v-deep() {
      .van-button {
        padding: 0 16px;
      }
      .van-submit-bar {
        border-top: 1px solid var(--van-border-color);
        > p {
          line-height: 40px;
          background-color: #fff7eb;
          text-align: center;
          color: #f29a4a;
          font-size: 12px;
          .van-count-down {
            display: inline-block;
            color: #f29a4a;
          }
        }
        &__bar {
          justify-content: space-between;
          height: 65px;
          .btn {
            position: relative;
            display: flex;
            justify-content: flex-end;
            font-size: 16px;
            width: 100%;
            .btn-first {
              background: var(--cp-bg);
              color: var(--cp-text3);
              margin-right: 10px;
              border: 0;
            }
          }
        }
      }
    }
    .bottom_price {
      position: absolute;
      left: 0px;
      top: 10px;
      font-size: 16px;
      .price {
        font-size: 18px;
      }
    }
  }
  .orange {
    color: #e9b47f !important;
  }
  .primary {
    color: var(--cp-primary) !important;
  }
  .more {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  .done {
    color: var(--cp-text3);
    background-color: var(--cp-bg);
    border: unset;
  }
  .second {
    margin-left: 16px;
  }
  .docInfo {
    margin-top: 46px;
  }
}
</style>
